<template>
	<div class="bgimg" :style="{ height: bodyHeight + 'px' }">
		<div class="reg">
			<van-nav-bar @click-right="onClickRight">
				<span slot="right">
       				我要登录
      			</span>
			</van-nav-bar>
		</div>
		<div class="login">
			<div class="textLogin">忘记密码</div>
			<div class="main">
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userName" clearable placeholder="请输入手机号码" maxlength="11" type="tel" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="yzm" placeholder="请输入验证码" maxlength="8" />
					</van-cell-group>
					<van-button class="yzm" type="default" :disabled="disabled" @click="Yzm">{{ codeText }}</van-button>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword" clearable placeholder="请输入密码" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword2" clearable placeholder="确认密码" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="Login" :loading="loading">确定</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	export default {
		name: 'Forget',
		components: {},
		props: {},
		data() {
			return {
				codeText: "获取验证码",
				disabled: false,
				currentTime: 60,
				checkImg: false,
				bodyHeight: '',
				userName: '',
				yzm: '',
				userPassword: '',
				userPassword2: '',
				loading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[^\d]/g, ''); // 手机号码
			},
			Yzm: function() {
				this.Yzm = this.Yzm.replace(/[\u4e00-\u9fa5]/ig, ''); // 验证码
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			},
			userPassword2: function() {
				this.userPassword2 = this.userPassword2.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			}
		},
		computed: {},
		methods: {
			Login() {
				if(!this.userName) {
					this.$toast('手机号码不能为空');
					return false;
				} else {
					if(this.userName.length < 11) {
						this.$toast('手机号码长度为11位');
						return false;
					}
				}
				if(!this.Yzm) {
					this.$toast('验证码不能为空');
					return false;
				}
				if(!this.userPassword) {
					this.$toast('密码不能为空');
					return false;
				} else {
					if(this.userPassword.length < 6 || this.userPassword.length > 20) {
						this.$toast('密码长度在6到20位之间');
						return false;
					}
				}
				if(!this.userPassword2) {
					this.$toast('确认密码不能为空');
					return false;
				} else {
					if(this.userPassword2.length < 6 || this.userPassword2.length > 20) {
						this.$toast('确认密码长度在6到20位之间');
						return false;
					}
				}
				if(this.userPassword != this.userPassword2) {
					this.$toast('两次密码输入不一致');
					return false;
				}
				this.loading = true;
				base.getForgotPassword({
					'userName': this.userName,
					'mobile': this.userName,
					'password': this.userPassword,
					'confirmPassWord': this.userPassword2,
					'smsCode': this.yzm
				}).then(res => {
					if(res.code == 200) {
						this.$router.push({
							path: '/Login'
						});
					}
					this.$toast(res.msg);
					this.loading = false;
				})
			},
			onClickRight() {
				this.$router.push({
					path: '/Login'
				});
			},
			countDown() {
				let that = this;
				this.disabled = true;
				let currentTime = this.currentTime;
				that.codeText = "正在发送验证码 ...";
				let interval = setInterval(function() {
					let time = currentTime - 1 + "s";
					that.codeText = "剩余 " + time;
					currentTime--;
					if(currentTime <= 0) {
						clearInterval(interval);
						that.codeText = "发送验证码";
						that.currentTime = 60;
						that.disabled = false;
					}
				}, 1000);
			},
			Yzm() {
				if(!this.userName) {
					this.$toast('手机号码不能为空');
					return false;
				} else {
					if(this.userName.length < 11) {
						this.$toast('手机号码长度为11位');
						return false;
					}
				}
				this.axios.get(process.env.API_HOST + 'captcha/sms/' + this.userName).then(res => {
					if(res.data.code == 8008){
						this.countDown();
					}
					this.$toast(res.data.msg);
				})
			}
		},
		created() {},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.reg /deep/ .van-nav-bar {
		background-color: transparent;
	}
	
	.reg /deep/ .van-nav-bar__left,
	.van-nav-bar__right {
		color: white;
	}
	
	.reg /deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	.reg /deep/ .van-hairline--bottom::after {
		border: 0;
	}
	
	.bgimg {
		height: 100%;
		background: url('../assets/images/bg.png') no-repeat left top;
		background-size: cover;
	}
	
	.login {
		padding-top: 45%;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.textLogin {
		color: white;
		font-size: 24px;
	}
	
	.main {
		position: relative;
		padding: 30px 0px;
	}
	
	.text {
		padding-bottom: 15px;
	}
	
	.btn .van-button--normal {
		width: 100%;
	}
	
	.text /deep/ .van-cell {
		background-color: rgb(168, 214, 240);
		border-radius: 20px;
		height: 38px;
		line-height: 36px;
	}
	
	.text /deep/ .van-cell-group {
		background-color: transparent;
		border-radius: 20px;
		height: 38px;
		line-height: 36px;
	}
	
	.text /deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		color: white;
	}
	
	.text /deep/ .van-field__control {
		color: white;
	}
	
	.text /deep/ .van-cell {
		padding: 2px 20px;
	}
	
	.text /deep/ .van-field__label {
		width: 60px;
	}
	
	.text /deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border: 0;
	}
	
	.forget {
		font-size: 13px;
		float: right;
		color: white;
		margin-top: -10px;
		padding-bottom: 35px;
	}
	
	/deep/ .van-button--primary {
		background: rgb(72, 146, 187);
		border-color: rgb(72, 146, 187);
		border-radius: 20px;
		height: 38px;
		line-height: 36px;
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: #6d9fba !important;
	}
	
	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: #6d9fba !important;
	}
	
	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: #6d9fba !important;
	}
	
	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: #6d9fba !important;
	}
	
	.yzm {
		font-size: 13px;
		color: white;
		position: relative;
		float: right;
		top: -28px;
		right: 15px;
	}
	
	.yzm.van-button--default {
		background-color: transparent;
		border: 0;
	}
	
	.yzm.van-button {
		height: 18px;
		line-height: 16px;
	}
</style>